<template>
  <div id="tabbarComponent">
    <tabbar>
      <tabbar-item :selected='curSelect == 1' @on-item-click='toPage("../index")'>
        <img slot="icon" src="../../static/image/index/home_k.png" />
        <img slot="icon-active" src="../../static/image/index/home_s.png" />
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item :selected='curSelect == 2' @on-item-click='toPage("../askTeacher")'>
        <img slot="icon" src="../../static/image/index/askteacher_k.png" />
        <img slot="icon-active" src="../../static/image/index/askteacher_s.png" />
        <span slot="label">问大师</span>
      </tabbar-item>
      <tabbar-item :selected='curSelect == 3' @on-item-click='toPage("../myCenter")'>
        <img slot="icon" src="../../static/image/index/mycenter_k.png" />
        <img slot="icon-active" src="../../static/image/index/mycenter_s.png" />
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vux";
export default {
  name:"fixTabbar",
  props:{
    curSelect:{
      type:Number,
      default: 1
    }
  },
  components: {
    Tabbar,
    TabbarItem
  },
  methods:{
    // 跳转使用repalce
    toPage:function(val){ 
      this.$router.replace(val)
    }
  }
};
</script>

<style lang='less' > 
#tabbarComponent{
  .weui-tabbar{
    position: fixed;
    border-top: none;
    background: white; 
    .weui-tabbar__icon{
      width: 44px;
      height: 44px;
    }
    .weui-tabbar__label{
      font-size: 20px;
    }
    .weui-bar__item_on{
      .weui-tabbar__label{
        color: #FDC46F;
      }
    }
  }
}
</style>